import React from 'react';
import './index.css';
import ShopBag from '../../components/ShopBag'
import { InputItem, List, Switch, Toast, Popover } from 'antd-mobile';
import mzsdk from '../../../../utils/mzsdk';

import MZActionSheet, { showActionSheet, closeActionSheet } from '../../../../components/MZActionSheet';
import GiftList from '../GiftList';
import Like from '../Like/Like'
import RedPackage from '../RedPackage';

/**
 * 底部的 互动 控制栏
 */

var isAutoHidden = true;

export default class InteractionControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowInputBox: false,//是否显示输入框
            message: '',//消息内容

            onlyHostMessage: false,//只看主播按钮是否选中

            barrageBtnSelect: true,//弹幕按钮是否选中

            isShowGiftEnter: true,//是否显示礼物入口

            isShowRedPackageEnter: true,//是否显示发红包入口

            isShowLikeEnter: true,//是否展示点赞入口
            showLikeAnimate: false,//是否展示点赞动画

            isShowShareEnter: true,//是否显示分享入口

            menuButtonIsClicked: false,//菜单按钮是否选中
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('interaction-control-config-update')
    }

    componentDidMount() {
        var _this = this;
        mzsdk.mzee.on('interaction-control-config-update', function (e) {
            switch (e.type) {
                case 'gift':
                    _this.setState({
                        isShowGiftEnter: e.value == 1 ? true : false
                    })
                    break;
                default:
                    break;
            }
        })
    }

    onInputMessage = (value) => {
        this.setState({ message: value });
    }

    sendButtonClick = () => {
        let { message } = this.state;

        if (message.trim().length <= 0) {
            return;
        }
        mzsdk.mzee.emit('interactionControl_sendMessage', message)

        this.setState({
            message: '',
            isShowInputBox: false
        })
    }

    inputOnBlur = () => {
        setTimeout(() => {
            if (isAutoHidden == false) {
                isAutoHidden = true
                return;
            }
            let { message } = this.state;
            if (message.trim().length <= 0) {
                this.setState({
                    isShowInputBox: false
                })
            }
        }, 100);
    }

    clickOnlyHost = (checked) => {
        var _this = this;
        isAutoHidden = false;
        this.setState({
            onlyHostMessage: checked
        }, () => {
            mzsdk.mzee.emit('only-host-change', checked)
        })
        setTimeout(() => {
            isAutoHidden = true;
            _this.input.focus()
        }, 300);
    }

    clickMenu = (e, type) => {
        switch (type) {
            case 'gift':
                showActionSheet(
                    <MZActionSheet title='礼物'>
                        <GiftList ticketId={this.props.ticketId} onClose={() => { closeActionSheet() }} />
                    </MZActionSheet>
                )
                break;
            case 'prize':
                this.setState({
                    showLikeAnimate: true
                }, () => {
                    this.like.add();
                })
                break;
            case 'share':
                Toast.info('点击了分享', 1.5)
                break;
            case 'barrage':
                this.handleVisibleChange(false)
                this.setState({
                    barrageBtnSelect: !this.state.barrageBtnSelect
                }, () => {
                    mzsdk.mzee.emit('barrage_is_show', this.state.barrageBtnSelect)
                    Toast.info(this.state.barrageBtnSelect ? '打开弹幕' : '关闭弹幕', 1)
                })
                break;
            case 'report':
                this.handleVisibleChange(false)
                Toast.info('点击了举报', 1.5)
                break;
            case 'redPackage':
                showActionSheet(
                    <MZActionSheet title='发红包'>
                        <RedPackage ticketId={this.props.ticketId} onClose={() => { closeActionSheet() }} />
                    </MZActionSheet>
                )
                break;
            default:
                break;
        }
    }

    handleVisibleChange = (isShow) => {
        this.setState({
            menuButtonIsClicked: isShow
        })
    }

    render() {
        let { isShowInputBox, message, isShowGiftEnter, showLikeAnimate, barrageBtnSelect, onlyHostMessage, isShowLikeEnter, isShowShareEnter, menuButtonIsClicked, isShowRedPackageEnter } = this.state;
        return (
            <div className="interaction-control-bar-background" id="interaction-control-bar-background">
                {
                    isShowInputBox == false && <div className="mobile-main-bottom-tools">
                        <ShopBag ticketId={this.props.ticketId}></ShopBag>
                        <div className="mobile-main-bottom-tools-enter-input" onClick={() => { this.setState({ isShowInputBox: !this.state.isShowInputBox }, () => { this.input.focus() }) }}>说点什么...</div>
                        {
                            <Popover mask
                                placement="top"
                                visible={menuButtonIsClicked}
                                overlay={
                                    <div className="menu-popover-background">
                                        <div className="menu-popover-item" onClick={(e) => { this.clickMenu(e, 'barrage') }}>
                                            <div className={barrageBtnSelect ? 'menu-popover-barrage' : 'menu-popover-barrage close'}></div>
                                            <div className="menu-popover-item-title">弹幕</div>
                                        </div>
                                        <div className="menu-popover-item" onClick={(e) => { this.clickMenu(e, 'report') }}>
                                            <div className="menu-popover-report"></div>
                                            <div className="menu-popover-item-title">举报</div>
                                        </div>
                                    </div>
                                }
                                align={{
                                    overflow: { adjustY: 0, adjustX: 0 },
                                    offset: [-3, -10],
                                }}
                                onVisibleChange={this.handleVisibleChange}
                            >
                                <div className={menuButtonIsClicked == true ? "mobile-main-bottom-tools-menu clicked" : "mobile-main-bottom-tools-menu"} onClick={(e) => { this.clickMenu(e, 'menu') }}></div>
                            </Popover>

                        }
                        {
                            isShowGiftEnter && <div className="mobile-main-bottom-tools-gift" onClick={(e) => { this.clickMenu(e, 'gift') }}></div>
                        }
                        {/* {
                            isShowRedPackageEnter && <div className="mobile-main-bottom-tools-redPackage" onClick={(e) => { this.clickMenu(e, 'redPackage') }}></div>
                        } */}
                        {
                            isShowLikeEnter && <div className="mobile-main-bottom-tools-prize" onClick={(e) => { this.clickMenu(e, 'prize') }}></div>
                        }
                        {
                            isShowShareEnter && <div className="mobile-main-bottom-tools-share" onClick={(e) => { this.clickMenu(e, 'share') }}></div>
                        }
                    </div>
                }
                {
                    isShowInputBox && <div className='mobile-main-chat-message-wrapper'>
                        <div className="mobile-main-chat-only-host">
                            <div className="only-host-name">只看主播</div>
                            <List>
                                <Switch checked={onlyHostMessage} onClick={this.clickOnlyHost}></Switch>
                            </List>
                        </div>
                        <div className="mobile-main-chat-input">
                            <List>
                                <InputItem name="message" type="text" placeholder="说点什么?..." value={message} defaultValue={message} onChange={this.onInputMessage} onBlur={this.inputOnBlur} ref={el => this.input = el}></InputItem>
                            </List>
                        </div>
                        <span className='mobile-main-chat-send' onClick={this.sendButtonClick}>发送</span>
                    </div>
                }
                {
                    showLikeAnimate && <Like ref={node => this.like = node} domName={this.props.isVertical == true ? "main-top-vertical" : "tab-content-chat"} finish={() => this.setState({ showLikeAnimate: false })} className="like-animation" />
                }
            </div >
        )
    }
}
